<template>
  <div class="content">
    <dc-header :page-to="'/personal'" :title="'业务偏好分析'"></dc-header>
    <div class="head-top">
      <dc-row @click.native="chooseThis(1)" class="big-card bg-white text-left" type="flex" justify="space-between"
              align="middle">
        <dc-col span="24">
          <div class="big-card-title">以营业额为基准进行分析</div>
          <div class="big-card-info">对平效、人效、人均消费等重要指标，以营业额（即未扣除优惠促销金额的收入）为基准来计算。例如：【平效】=【营业额】/【门店面积-平米】</div>
        </dc-col>
        <span v-if="selected === 1" class="select-label"><i
          class="iconfont icon-account-mode-selected green"></i></span>
      </dc-row>
      <dc-row @click.native="chooseThis(2)" class="big-card bg-white text-left" type="flex" justify="space-between"
              align="middle">
        <dc-col span="24">
          <div class="big-card-title">以实际收入为基准进行分析</div>
          <div class="big-card-info">对平效、人效、人均消费等重要指标，以实际收入（即去掉优惠促销金额后的收入）为基准来计算。例如：【平效】=【实际收入】/【门店面积-平米】</div>
        </dc-col>
        <span v-if="selected === 2" class="select-label"><i
          class="iconfont icon-account-mode-selected green"></i></span>
      </dc-row>
    </div>
  </div>
</template>
<script>
  import header from '@/components/header';
  import {col, row} from '@/components/Flex';
  import api from '@/common/api/personal';
  import mintUi from '@/common/mintUi';

  export default {
    data () {
      return {
        selected: 1
      };
    },
    components: {
      'dc-header': header,
      'dc-col': col,
      'dc-row': row
    },
    methods: {
      chooseThis (num) {
        this.selected = num;
        api.setPreference({
          busAnalysisFlag: this.selected
        }).then(() => {
          mintUi.openToast('设置成功');
        });
      },
      getThis (data) {
        api.getPreference(data).then(res => {
          this.selected = res;
        });
      }
    },
    activated () {
      this.getThis({});
    }
  };
</script>
<style lang="scss" scoped>
  @import "../../assets/css/variable";

  .big-card {
    margin: px2rem(20px);
    border-radius: px2rem(8px);
    padding: px2rem(36px) px2rem(40px);
    position: relative;
    .big-card-title {
      font-size: px2rem(32px);
      color: #333;
      font-weight: bold;
    }
    .big-card-info {
      font-size: px2rem(26px);
      color: #666;
      margin-top: px2rem(10px);
    }
    .select-label {
      position: absolute;
      right: 0;
      top: 0;
      i {
        font-size: px2rem(72px);
        line-height: 1;
      }
    }
  }
</style>
